<template>
	<view class="content">
		<image class="response" :src="posterUrl" mode="widthFix"></image>
		<view class="sharTitle">
			<view class="title">
				邀请记录
			</view>
		</view>
		<scroll-view scroll-y="true" class="sharLog" @scrolltolower=scrolltolower>
				<view class="item">
					<view class="item" v-for="(item, index) in list" :key="index">
						<view class="element img">
							<image v-if="item.avatarUrl != null && item.avatarUrl.length>0"  lazy-load="true" :src="item.avatarUrl"></image>
							<image v-else  lazy-load="true" src="../../../static/img/my/default-logo.png"></image>
						</view>
						<view v-if="item.nickName != null && item.nickName.length>0" class="element nickName">{{item.nickName}}</view>
						<view v-else class="element nickName">待授权</view>
						<view class="element shareTime">{{toDealTime(item.createTime)}}</view>
					</view>
				</view>
				<view class="noMore" v-show="isNoMore">暂无更多数据...</view>
		</scroll-view>
		<button class="shareBtn" open-type="share">邀请好友</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				posterUrl:'',
				page:1,
				isNoMore:false,
				share: {
					title: "",
					path: '',
					imageUrl: '',
					desc: '',
					content: ''
				},
				list:[]
			}
		},onShow() {
			this.list = [];
			this.getData(1);
		},
		methods:{
			scrolltolower(){
				this.page++;
				this.getFriendPageData(this.page);
			},
			getData(page){
				let opts = {
					url: 'myInviteFriend/getBaseData/'+page,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.share = rData.inviteFriendShare;
					this.posterUrl = rData.posterUrl;
					this.list = rData.myMyFriendVoList;
					if(this.list.length == 0){
						this.isNoMore = true;
					}
				}, error => {})
			},
			toDealTime(val){
				let index = val.indexOf(' ');
				return val.substring(0,index);
			},
			getFriendPageData(page){
				let opts = {
					url: 'myInviteFriend/getFriendPageData/'+page,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					if(rData.length ==0){
						uni.showToast({
							title: '暂无更多数据...',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.isNoMore = true;
						return;
					}
					for (let i = 0; i < rData.length; i++) {
						this.list.push(rData[i]);
					}
				}, error => {})
			}
		}
	}
</script>

<style>
	.content {
		background-color: #FFD193;
		width: 100%;
		height: 100vh;
		margin: 0rpx !important;
	}


	.item {
		clear: both;
	}

	.item image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
	}

	.item .element {
		width: 230rpx;
		float: left;
		line-height: 80rpx;
		text-align: left;
		margin-top: 15rpx;
	}

	.item .img {
		text-align: center;
		width: 160rpx;
	}

	.item .nickName {
		width: 300rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.item .shareTime {
		font-size: 30rpx;
		color: #999999;
	}


	.shareBtn {
		position: fixed;
		bottom: 20rpx;
		text-align: center;
		width: 550rpx;
		background-color: #FF7800;
		color: #fff;
		margin-left: 100rpx;
		padding: 20rpx 0;
		border-radius: 20rpx;
	}

	.title {
		text-align: center;
		font-size: 35rpx;
		font-weight: 800;
		padding: 20rpx;
	}

	.sharLog {
		background-color: #fff;
		width: 690rpx;
		height: 470rpx;
		margin-left: 30rpx;
		border-radius: 10rpx;
		overflow: scroll;
		padding: 20rpx 0;
	}

	button {
		margin: 0;
		padding: 0;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	button:after {
		border: none;
	}
</style>
